<script setup lang="ts">
import { ref } from 'vue'
// import { userLogin, type LoginResponse } from '../api/login'
import router from '@/router'
const username = ref('admin')
const password = ref('888888')
const phone = ref(18999999999)
const data = {
  username: username.value,
  password: password.value,
  phone: phone.value
}
const login = () => {
  console.log(data)
  router.push({
    path: "/sy"
  })
  // userLogin<LoginResponse>(data).then(res => {
  //   console.log(res)
  //   if (res.code === 200) {
  //     console.log('登录成功')
  //     localStorage.setItem('token', res.data.token)
  //     router.push({
  //       path: "/sy"
  //     })
  //   } else {
  //     console.log('登录失败')
  //   }
  // })
}

</script>

<template>
  <div>
    <div class="box">
      <div class="box-con">
        <div class="h" style="text-align: center;font-size: 10px; align-content: center;">
          <span>欢迎登录</span>
        </div>
        <div class="cc">
          <div class="c" style="display: flex ; justify-content: center; align-items: center;">
            <div class="c-con">
              <div style="text-align: center;">
                <input v-model="username" type="text" placeholder="请输入用户名" />
              </div>
              <div style="text-align: center;">
                <input v-model="phone" type="password" placeholder="请输入手机号" />
              </div>
              <div style="text-align: center;">
                <input v-model="password" type="password" placeholder="请输入密码" />
              </div>

              <div style="text-align: center;">
                <button @click="login">登录</button>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box {
  height: 100vh;
  background-color: rgb(107, 106, 106);
  display: flex;
  justify-content: center;
  align-items: center;

  .box-con {
    height: 50%;
    width: 50%;
    background-color: #eae6e6;

    .h {
      height: 10%;
      width: 100%;
      background-color: #c2b8b8;
    }

    .cc {
      height: 90%;
      display: flex;
      justify-content: center;
      align-items: center;

      .c {
        height: 90%;
        width: 90%;
        background-color: rgb(217, 244, 255);
      }
    }
  }
}
</style>
